<template>
  <section class='f-earning'>
    <ul class="f-search">
      <li class="f-flex-end" style="width:180px" @click="openDatePicker">
        <p class="f-mr-05">{{currentDateStr}}</p>
        <van-icon name="arrow-down" />
      </li>
    </ul>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :style="{ height: currentHeight }" style="overflow-y: auto;">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <section class="f-cell-ground" v-for="(item,index) in tableData" :key="index" @click="toDetail(item)">
          <div class="f-flex-between f-cell-title">
            <p>订单编号：{{item.incomeOrderId || '--'}}</p>
            <p>{{ getDateTime(item.createTime)[6] }}</p>
          </div>
          <div class="f-cell f-pb-10">
            <section class="g-flex-ct">
              <img class="f-img2" src="@/assets/imgs/jhh_icon_brokerage_order.png" alt="">
              <div class="f-cell-text">
                <p>
                  <span>供应商：</span>
                  <span>{{item.supplierShopName || '--'}}</span>
                </p>
                <p>
                  <span>关联商品：</span>
                  <span>{{item.goodsName || '--'}}</span>
                </p>
                <p>
                  <span>激活号码：</span>
                  <span>{{item.phone || '--'}}</span>
                </p>
              </div>
            </section>
            <div class="f-right">
              <p class="f-mb-05">{{ toThousands(item.income) }}</p>
              <p style="font-size: 10px" :style="{'color': item.incomeType == 2? 'red': '#424242'}">
                {{item.incomeType == 1? '佣金收益': '佣金核减'}}</p>
            </div>
          </div>
          <p class="f-divider" v-if="index+1 < tableData.length"></p>
        </section>
      </van-list>
    </van-pull-refresh>

    <Date-Picker ref="datePickerRef" type='time' @selectDate="selectDate"></Date-Picker>

    <van-popup v-model:show="showFilter" closeable position="bottom" close-icon-position="top-left">
      <p class="f-popup-title">状态选择</p>
      <ul class="f-status-tag">
        <li :class="{'f-status-active-btn': !searchForm.state}" @click="selectStatus(0)">全部状态</li>
        <li :class="{'f-status-active-btn': searchForm.state  == '3'}" @click="selectStatus(3)">成功</li>
        <li :class="{'f-status-active-btn': searchForm.state  == '2'}" @click="selectStatus(2)">失败</li>
        <li :class="{'f-status-active-btn': searchForm.state  == '1'}" @click="selectStatus(1)">待审核</li>
        <li :class="{'f-status-active-btn': searchForm.state  == '4'}" @click="selectStatus(4)">等待上级审核</li>
        <li :class="{'f-status-active-btn': searchForm.state  == '5'}" @click="selectStatus(5)">待分佣</li>
      </ul>
    </van-popup>

  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import { initDatepicker, getDateTime, getUnixTime, toThousands, getStore } from '@/utils/utils';
import DatePicker from '@/components/DatePicker.vue'
import api from '../api'

export default {
  components: { DatePicker },

  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const datePickerRef = ref()

    const state = reactive({
      searchForm: {
        "auditOrderId": "",
        "consumerShopId": getStore('USER_INFO').companyId,
        "endTime": "",
        "goodsId": "",
        "incomeOrderId": "",
        "orderBy": "id desc",
        "page": 1,
        "phone": "",
        "size": 10,
        "startTime": "",
        "supplierShopId": ""
      },

      loading: false,
      finished: false,
      refreshing: false,
      tableData: [],
      total: 0,

      currentHeight: '500px',

      currentDateStr: "",
      showFilter: false,

      orderId: computed(() => {
        return store.state.orderId;
      }),
    })

    watch(() => state.orderId, (newVal, oldVal) => {
      state.searchForm.incomeOrderId = state.orderId
      state.refreshing = true
      onRefresh()
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '收益明细',
        show: true,
        left: true,
        leftType: 'back',
        right: true,
        rightType: 'search',
      });

      state.currentHeight = window.innerHeight - 144 + 'px'

      state.searchForm.startTime = initDatepicker(4, 30 * 24 * 60 * 60 * 1000);
      state.searchForm.endTime = initDatepicker(3);
      let str = getDateTime(state.searchForm.startTime)[8] + ' 至 ' + getDateTime(state.searchForm.endTime)[8]
      state.currentDateStr = str
    })

    const onLoad = () => {
      let json = JSON.parse(JSON.stringify(state.searchForm))

      if (state.refreshing) {
        state.tableData = [];
        state.refreshing = false;
      }

      api.inList(json).then(res => {
        state.refreshing = false

        if (res.data.list.length) state.searchForm.page += 1
        state.tableData.push(...res.data.list)

        // 防止触发两次
        if (state.tableData.length >= res.data.total) {
          state.finished = true;
        } else {
          state.finished = false;
        }

        // 加载状态结束
        state.loading = false;

        // 数据全部加载完成
        if (state.tableData.length < 10) {
          state.finished = true;
        }
      }).catch(err => {
        state.loading = false;
        state.finished = true;
        state.refreshing = false
      })
    };

    const onRefresh = () => {
      state.searchForm.page = 1

      // 清空列表数据
      state.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      state.loading = true;
      onLoad();
    };

    const openDatePicker = () => {
      datePickerRef.value.datePopup = true
    }

    const selectDate = (e) => {
      if (e.popupTabs == 1) {
        let str = e.startStr + ' 至 ' + e.endStr
        state.currentDateStr = str
        state.searchForm.startTime = getUnixTime(e.startStr)
        state.searchForm.endTime = getUnixTime(e.endStr) - 999 + 24 * 60 * 60 * 1000;
        state.searchForm.month = ""
      } else {
        state.currentDateStr = e.currentDateStr
        state.searchForm.month = e.currentDateStr
        state.searchForm.startTime = ""
        state.searchForm.endTime = ""
      }

      state.refreshing = true
      onRefresh()
    }

    const selectStatus = (e) => {
      state.searchForm.state = e
      state.showFilter = false
      state.refreshing = true
      onRefresh()
    }

    const toDetail = (params) => {
      router.push({
        path: '/capital/earning/detail',
        query: {
          incomeOrderId: params.incomeOrderId
        }
      })
    }

    return {
      ...toRefs(state),
      datePickerRef,
      getDateTime,
      onLoad,
      onRefresh,
      openDatePicker,
      selectDate,
      selectStatus,
      toThousands,
      toDetail,
    }
  }
}
</script>
<style lang='scss' scoped>
.f-earning {
  .f-search {
    font-size: 12px;
    color: #000000;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f3f3f3;
  }
  .f-cell-ground {
    width: 375px;
    background: #ffffff;
    padding-left: 19px;
    .f-cell-title {
      font-size: 10px;
      color: #666666;
      padding: 10px 0;
      padding-right: 14px;
    }
    .f-cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 14px;
      font-size: 12px;
      .f-cell-text {
        font-size: 10px;
        color: #666666;
        p {
          margin: 5px 0;
        }
        p > span:first-child {
          display: inline-block;
          width: 60px;
          text-align: right;
        }
        p > span:last-child {
          color: #000000;
        }
      }
    }
    .f-divider {
      width: 100%;
      height: 1px;
      background: #aaaaaa;
    }
  }
  .f-img2 {
    width: 40px;
    height: 40px;
    margin-right: 13px;
  }
  .f-status-tag {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 150px;
    li {
      background: #f3f3f3;
      border: 1px solid #a9a9a9;
      border-radius: 3px;
      padding: 7px 20px;
      font-size: 13px;
      margin: 10px;
    }
  }
  .f-status-active-btn {
    background: #3273f3 !important;
    border: 1px solid #3273f3 !important;
    color: #fff;
  }
}
</style>